@tailwind base;
@tailwind components;
@tailwind utilities;

/* 定义主题颜色 light dark */
@layer base {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  :root {
    --primary: #1d222c;
    --primary-foreground: #f6eedc;
    --primary-card: #fefce8;
    --select-text: #fef9c2;
  }
  html[data-theme="dark-classic"] {
    --primary: #f6eedc;
    --primary-foreground: #1d222c;
    --primary-card: #18191a;
    --select-text: #79716b;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    font-size: 20px;
    font-family: "Roboto", sans-serif;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    scroll-margin-top: 90px;
  }
}

@layer utilities {
  /* 自定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 5px; /* 纵向滚动条的宽度 */
    height: 5px; /* 横向滚动条的高度 */
  }

  ::-webkit-scrollbar-track {
    background: #f0f0f0; /* 滚动条轨道背景 */
    border-radius: 2px; /* 圆角 */
  }

  ::-webkit-scrollbar-thumb {
    background: #8b8b8b; /* 滑块颜色 */
    border-radius: 2px; /* 圆角 */
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #636363; /* 滑块悬停颜色 */
  }

  ::selection {
    background-color: var(--select-text); /* 选中文字的背景色 */
  }
}

@layer components {
  /* 文章入场动画 */
  .slide-in-blurred-left {
    -webkit-animation: slide-in-blurred-left 0.6s cubic-bezier(0.23, 1, 0.32, 1)
      both;
    animation: slide-in-blurred-left 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  /* browse 页面 a 标签 */
  .prose a {
    text-decoration: none;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2025-7-15 9:46:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-blurred-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
    transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scaleY(1) scaleX(1);
    transform: translateX(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
